<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../css/app.css" rel="stylesheet" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<style>
			.mui-radio input[type='radio']:checked:before, .mui-checkbox input[type='checkbox']:checked:before {
				color: #FFD161;
			}
			.mui-radio input[type='radio'], .mui-checkbox input[type='checkbox']{
				top: -6px;
			}
			#name{
				margin-left: 20px;
			}
			.mui-segmented-control .mui-control-item.mui-active {
				color: #EC971F;
				background-color: rgba(255,209,97,0.5);
				
			}
			.mui-segmented-control .mui-control-item{
				border-color: #EC971F;
				color: #333;
			}
			.mui-segmented-control{
				border: 1px solid #EC971F;
			}
			.mui-btn-block {
				width: 100%;
				margin: 10px auto;
				padding: 8px 0;
				background-color: #EC971F;
				color: white;
			}
		</style>
	</head>

	<body>

		<div class="mui-content">
			<!-- 顶部填充背景 -->
			<div style="background-color: #EC971F;height: 200px;width: 100%;" id="bck">
				<p style="color: white;padding: 80px 0 0 10px;font-size: 35px;font-weight: 600;">预约:<span id="name"></span></p>
			</div>
			<div class="mui-card" style="margin-top: -50px;">
				<div class="mui-card-header">
					窗口位置：<span id="loc"></span>
				</div>
				<div class="mui-card-content" style="padding-top: 10px;padding-bottom: 10px;">
					<div class="mui-input-row">
						<label style="width: 160px;">取餐方式：</label>
						<div class="mui-segmented-control" style="width: 50%;">
							<a class="mui-control-item mui-active" href="#item1">外带</a>
							<a class="mui-control-item" href="#item2">堂食</a>
							<a class="mui-control-item" href="#item3">送餐</a>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
							<label>联系人：</label>
							<input type="text" placeholder="请填写收货人的姓名">
						</div>
					</li>
					<li class="mui-table-view-cell">
						<form style="display: block;padding: 10px 45px;">
							<div class="mui-radio mui-left" style="float: left;">
								<label>先生</label>
								<input name="gender" type="radio">

							</div>
							<div class="mui-radio mui-left" style="float: right;">
								<label>女士</label>
								<input name="gender" type="radio" checked>
							</div>
						</form>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
							<label>手机号：</label>
							<input type="text" placeholder="请填写收货人的手机号">
						</div>
					</li>
				</ul>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">
					送达时间:
					<p class="select-time" data-options='{"beginYear":2018,"endYear":2018}' style="margin-bottom: 0px;">
						<span class="mui-icon-extra mui-icon-extra-outline"></span>
						<span id="result" style="font-size: 16px; line-height: 40px;">点击选择送达时间</span>
					</p>
				</div>
			</div>
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
							<div style="margin: 10px 0;">
								<span>支付方式</span><span id="payText" style="float: right;margin-right: 6%;">支付宝</span>
							</div>
						</a>
						<div class="mui-collapse-content">
							<form class="mui-input-group">
								<div class="mui-input-row mui-radio">
									<label>支付宝支付</label>
									<input class="payRad" value="支付宝支付" name="radio1" type="radio">
								</div>
								<div class="mui-input-row mui-radio">
									<label>微信支付</label>
									<input class="payRad" value="微信支付" name="radio1" type="radio">
								</div>
							</form>
						</div>
					</li>
				</ul>
			</div>
			<div style="margin: 20px 10px;">
				<button type="button" class="mui-btn mui-btn-warning mui-btn-block">确认支付
				<span class="mui-badge mui-badge-warning" style="font-size: 20px;">￥10</span></button>
			</div>
		</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var currentW = plus.webview.currentWebview();
				// console.log(currentW.name);
				var loc = document.getElementById("loc");
				var name = document.getElementById("name");
				loc.innerHTML = currentW.loc;
				name.innerHTML = currentW.name;
			})
			//支付方式
			mui(".mui-input-group").on("tap","input",function(){
				var text = this.getAttribute("value");
				var payText = document.getElementById("payText");
				payText.innerText = text;
			});
			function clickButton() {
				plus.nativeUI.alert('clicked!');
			}
			(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('.select-time');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if (_self.picker) {
							_self.picker.show(function(rs) {
								result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');

							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								result.innerText = rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}

					}, false);
				});

			})(mui);
		</script>
	</body>
</html>
